﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0042)http://andrew-hoyer.com/experiments/cloth/ -->
<HTML>
	<HEAD>
		<META content="text/html; charset=utf-8" http-equiv="Content-Type">
		<META name="google-site-verification" content="Br-vdo-tI_IepKZayqb0UzGTgoz5otEAdD-MLQv_OYU">
		<META name="GENERATOR" content="MSHTML 9.00.8112.16421">
		<META name="author" content="Andrew Hoyer">
		<META name="description"
		content="Personal playground for Andrew Hoyer">
		<TITLE>Andrew Hoyer</TITLE>
		<LINK title="Recent Entries" rel="alternate" type="application/atom+xml" href="/atom.xml">
		<LINK
		rel="stylesheet" type="text/css" href="Andrew%20Hoyer_files/main.css">
		<SCRIPT type="text/javascript" charset="utf-8" src="../../jslib/mootools-1.2.5-core-nc.js"></SCRIPT>
		<SCRIPT type="text/javascript" charset="utf-8" src="Andrew%20Hoyer_files/main.js"></SCRIPT>
		<SCRIPT type="text/javascript" charset="utf-8" src="Andrew%20Hoyer_files/fast_vector.js"></SCRIPT>
		<SCRIPT type="text/javascript" charset="utf-8" src="Andrew%20Hoyer_files/canvas.js"></SCRIPT>
		<SCRIPT type="text/javascript" charset="utf-8" src="Andrew%20Hoyer_files/point.js"></SCRIPT>
		<SCRIPT type="text/javascript" charset="utf-8" src="Andrew%20Hoyer_files/constraint.js"></SCRIPT>
		<SCRIPT type="text/javascript" charset="utf-8" src="Andrew%20Hoyer_files/cloth.js"></SCRIPT>
	</HEAD>
	<BODY>
		<SCRIPT type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-15032423-1']);
			_gaq.push(['_trackPageview']);

			(function() {
				var ga = document.createElement('script');
				ga.type = 'text/javascript';
				ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0];
				s.parentNode.insertBefore(ga, s);
			})();
		</SCRIPT>
		<!--[if IE]>
		<P class="warning"><STRONG>Be warned</STRONG>, many things on this website may
		or may not (most likely the latter) be supported in Internet Explorer.</P><![endif]-->
		<NOSCRIPT>
			&lt;p class='warning'&gt;&lt;strong&gt;What?!&lt;/strong&gt; No Javascript?!
			This site has plenty of javascript goodness, I highly suggest you turn it back
			on!&lt;/p&gt;
		</NOSCRIPT>
		<HEADER>
			<A href="http://andrew-hoyer.com/">Andrew
			Hoyer</A>
			<A href="http://andrew-hoyer.com/blog/">(blog)</A>
			<A href="http://andrew-hoyer.com/experiments/">(experiments)</A>
			<A
			href="http://andrew-hoyer.com/thoughts/">(thoughts)</A>
		</HEADER>
		<DIV id="content">
			<STYLE type="text/css" media="screen">
				canvas {
					border:1px solid #ddd;
					margin:0;
					padding:0;
				}

			</STYLE>
			<DIV style="text-align: center;">
				<P>
					Click and drag to move points. Hold down any key to pin them.
				</P>
				<CANVAS height="450" width="650">
					<DIV class="no_canvas">
						<STRONG>Sorry, It looks as though your browser does not
						support the canvas tag...</STRONG> If you can, I suggest that you try chrome or
						Safari.
					</DIV>
				</CANVAS>
				<P>
					<INPUT id="constraints" CHECKED="checked" type="checkbox">
					Draw Lines &nbsp;
					<INPUT id="points" type="checkbox">
					Draw Points
					<BR>
				</P>
			</DIV>
			<DIV id="chrome-link">
				<A href="http://www.chromeexperiments.com/detail/2d-cloth-simulation/">
				<IMG
				alt="See my Experiment on ChromeExperiments.com" src="Andrew%20Hoyer_files/badge-white_black.png">
				</A>
			</DIV>
			<H3>A little explanation</H3>
			<P>
				Every line in the cloth simulation is technically called a constraint and
				every point is a point mass (an object with no dimension, just location and
				mass). All the constraints do is control the distance between each point mass.
				If two points move too far apart, it will pull them closer. If two points are
				too close together, it will push them apart. The cloth is really then just a
				collection of constraints and point masses in a never ending struggle.
			</P>
			<H3>A little more detail:</H3>
			<P>
				What makes this simulation special is the speed at which everything is
				computed. Javascript (the language this is written in) is not exactly the most
				efficient language for this type of computation. This being said, much time was
				spent squeezing out every little detail that slows things down.
			</P>
			<P>
				The most computationally expensive part is trying to satisfy the constraints.
				To do this requires the calculation of distance between two points. This is easy
				to do with a little math, but that often involves an expensive square root. This
				is something that cannot simply be thrown out either, so what do you do? You
				approximate it. There are lots of mathematical tools for approximating
				functions, in this case I chose the first couple terms of a taylor
				expansion.
			</P>
			<P>
				"Boring!" you say.
			</P>
			<P>
				No. Not boring.
				<STRONG>Beautiful</STRONG>...
			</P>
			<P>
				Maybe a little more detail
			</P>
			<P>
				Another pretty neat thing about this simulation is how all the constraints
				are satisfied. As I mentioned above, a constraint is basically a rule that
				controls the distance between two points. So for example if a point has moved
				too far away from its constrained counterpart, the constraint will suck it back
				in. What makes this a little trickier is the fact that we have several
				constraints attached to a single point. This means that this point is going to
				be constantly jerked around when the constraint satisfaction process begins to
				execute. In terms of visuals, the cloth would become really springy, jittery and
				all around unnatural looking.
			</P>
			<P>
				As it turns out there is a really simple solution to this problem. Instead of
				satisfying all the constraints just once, you simply satisfy them several times
				before updating the screen. In the case of this cloth simulation all I needed to
				do was try satisfying the constraints twice. But for things like simple rope
				simulations it may be necessary to satisfy several times (maybe 4 or 5). The
				more times you satisfy, the more rigid the constraint becomes. This process is
				known as relaxation and is pretty darn cool.
			</P>
			<P>
				Knowledge is power:
			</P>
			<P>
				If you're interested here are some links:
			</P>
			<UL>
				<LI>
					<A href="http://web.archive.org/web/20070610223835/http://www.teknikus.dk/tj/gdc2001.htm">Advanced
					Character Physics</A> This article (or paper...) is my inspiration for doing
					this simulation. A lot of the concepts discussed by Thomas Jacobsen are
					implemented here. (Thank you to, Mariano Chouza for finding a working
					link)
				</LI>
				<LI>
					<A
					href="http://en.wikipedia.org/wiki/Methods_of_computing_square_roots">Computing
					square roots</A> Like most math topics on wikipedia, there is way too much
					detail here. But it was pretty helpful in gaining an understanding into what
					is going on. It also gave me a good throw back to my second year calculus
					courses.
				</LI>
				<LI>
					<A href="http://www.jrc313.com/processing/cloth/index.html">'Processing'
					cloth simulation</A> A much more powerful implementation of what I've done
					here using the processing library.
				</LI>
			</UL>
		</DIV>
		<FOOTER>
			<DIV id="contact">
				(
				<A id="twitter"
				href="http://www.twitter.com/ndrwhr">twitter</A>
				<A id="facebook" href="http://www.facebook.com/ahoyer">facebook</A>
				<A
				id="flickr" href="http://www.flickr.com/people/dolinski">flickr</A>
				<A id="email"
				href="mailto:me@andrew-hoyer.com">email</A>
				<A id="feed" href="http://andrew-hoyer.com/atom.xml">feed</A>
				)
			</DIV>
		</FOOTER>
	</BODY>
</HTML>
